<template>
	<view>
		<view class="bc" style="margin: 20px 20px 20px 20px;font-size: 14px;">
			<i class="ri-information-fill" style="color:#008040;font-size:20px;"></i>
			<!-- <i-icon size="20px" color="#008040" name="information-fill"></i-icon> -->
			您出售废旧的费用通过电子钱包打款给你
		</view>
		<view class="bkk">
			<view class="bl b20">
				<view class="bc">
					<view class="bc">
						<i class="ri-user-fill" style="color:#008040;font-size:30px;"></i>
						<!-- <i-icon size="30px" color="#008040" name="user-3-fill"></i-icon> -->
						绑定个人信息
					</view>
				</view>
			</view>
			<view class="b30">
				<view class="bk b10">
					<input type="text" v-model="bankAccName" placeholder="真实姓名" />
				</view>
				<view class="bk b10">
					<input type="idcard" v-model="cerNo" maxlength="18" placeholder="身份证号码" />
				</view>
			</view>
			<view class="inboxe">
				<view class="bl b20">
					<view class="">身份证有效期</view>
					<view class="bl">
						<checkbox-group @change="checkboxChange2" style="display:inline;">
							<checkbox :checked="state2"></checkbox>
						</checkbox-group>长期
					</view>
				</view>
			</view>
			<view class="inboxr" style="margin-bottom: 25rpx;">
				<view class="b10">
					<uni-datetime-picker type="date" placeholder="开始日期" border="false" @change="timestampChange" />
				</view>
				<view>
					<uni-datetime-picker type="date" placeholder="结束日期" border="false" @change="timestampChange2" />
				</view>
			</view>
			<view class="">
				<view class="cu-bar bg-white margin-top">
					<view class="">
						身份证信息面
					</view>
					<view class="action">
						{{imgList.length}}/1
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
							:data-url="imgList[index]">
							<image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>

				<view class="cu-bar bg-white margin-top">
					<view class="">
						身份证国徽面
					</view>
					<view class="action">
						{{imgList2.length}}/1
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList2" :key="index" @tap="ViewImage2"
							:data-url="imgList2[index]">
							<image :src="imgList2[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg2" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage2" v-if="imgList2.length<1">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bkk">
			<view class="bl b20">
				<view class="bc">
					<i class="ri-bank-card-fill" style="color:#008040;font-size:30px;"></i>
					<!-- <i-icon size="30px" color="#008040" name="bank-card-fill"></i-icon> -->
					绑定银行卡
				</view>
				<view class="bc red" style="font-size: 12px;">
					<i class="ri-information-fill" style="color:#f73164;font-size:20px;"></i>
					<!-- <i-icon size="20px" color="#f73164" name="information-fill"></i-icon> -->
					用于提现时使用
				</view>
			</view>
			<view class="">
				<view class="bk b10">
					<input type="text" v-model="bankName" placeholder="开户行" />
				</view>
				<view class="bk b10">
					<input type="text" v-model="acctNo" maxlength="20" placeholder="银行卡号" />
				</view>
				<view class="bl b10">
					<view class="bk">
						<input type="text" v-model="mobile" maxlength="11" placeholder="预留手机号" />
					</view>
					<button type="default" @click="getOpenCode()">获取验证码</button>
				</view>
				<view class="bk b10">
					<input type="text" v-model="messageCode" maxlength="6" placeholder="输入验证码" />
				</view>
				<view class="b10">
					<button @click="toKtqb()">确认</button>
				</view>
				<view class="f12">
					<label @click="state=!state">
						<checkbox :value="temp" /><text>阅读并同意《武汉众邦银行E账通平台子账户服务协议》</text>
					</label>
				</view>
			</view>
		</view>
		<view class="h60"></view>
		<!-- <button @click="open = 1">弹出</button> -->
		<view v-if="open==1" class="p-tkb">
			<view class="p-tkh"></view>
			<view class="p-tk" style="width: 300px; height: 300px;">
				<view class="tb">
					<view class="titem">
						<i class="ri-add-circle-fill" style="color:#008040;font-size:20px;"></i>
						<!-- <i-icon size="20upx" color="#008040" name="add-circle-fill" class="r10"></i-icon> -->
						设置交易密码
					</view>
					<i class="ri-close-circle-fill" style="color:#f73164;font-size:20px;" @click="open=false"></i>
					<!-- <i-icon size="25upx" color="#f73164" name="close-circle-fill" @click="open=false"></i-icon> -->
				</view>
				<view class="com">
					<view class="li bc">
						<view class="wz">交易密码</view>
						<view class="nr"><input type="password" v-model="password"></view>
					</view>
					<view class="li bc">
						<view class="wz">确认交易密码</view>
						<view class="nr"><input type="password" v-model="passwords"></view>
					</view>
					<view class="bc" style="margin-left: 90px;">
						<button type="button" @click="addTwoData()" style="width: 100px;">
							<i class="ri-arrow-right-s-line" style="color:#fff;font-size:12px;"></i>
							<!-- <i-icon size="20upx" color="#fff" name="arrow-right-s-line"></i-icon> -->
							确认
						</button>
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				agree: false,
				temp: '',
				userName: '',
				cerNo: '',
				bankAccName: '',
				mobile: '',
				messageCode: '',
				acctNo: '',
				disabled: false,
				open: 0,
				class2: 'btns2',
				timer: 60,
				title: '获取验证码',
				password: '',
				passwords: '',
				state: false,
				state2: false,
				array: ['选择开户银行', '中国银行', '中信银行', '中国建设银行', '中国工商银行', '中国农业银行', '中国邮政储蓄银行', '中国人民银行', '中国交通银行', '招商银行',
					'民生银行', '浦东银行', '兴业银行', '华夏银行', '光大银行', '广发银行', '国开行', '农发行', '进出口行'
				],
				bankName: '',
				cerStartDate: '',
				cerEndDate: '',
				imgList: [],
				imgList2: [],
				certFrontUrl: '',
				certBackUrl: '',
				index: 0,
				openInfo: 0
			}
		},
		methods: {

			/**
			 * 查询该token是否有添加过开户信息
			 */
			getOpenInfo() {
				let token = uni.getStorageSync('token');
				let tthis = this;
				if (token == null) {
					uni.showToast({
						title: '用户未登录'
					})
					return;
				}
				uni.request({
					url: tthis.baseURL + '/gr/find/one',
					method: "POST",
					header: {
						'token': token
					},
					success(res) {
						console.log(res)
						if (res.data.success == true) {
							let rData = res.data.data[0];
							console.log(res.data.data[0])
							tthis.acctNo = rData.acctNo;
							tthis.bankAccName = rData.bankAccName;
							tthis.bankName = rData.bankName;
							tthis.cerEndDate = rData.cerEndDate;
							tthis.cerNo = rData.cerNo;
							tthis.cerStartDate = rData.cerStartDate;
							tthis.mobile = rData.mobile;
							tthis.openInfo = 1; //开户信息状态
						} else {
							tthis.openInfo = 0;
							console.log("未添加开户信息")
						}
					},
					fail(err) {
						console.log(err)
						uni.showToast({
							title: err.message,
							icon: 'error'
						})
					}
				})
			},

			ChooseImage() { //身份证信息面
				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					//sourceType: ['camera'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
						const tempFilePaths = res.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: this.baseURL + '/com/upload?fileType=certBack',
							header: {
								'token': uni.getStorageSync('token')
							},
							filePath: tempFilePaths[0],
							name: 'file',
							success: function(uploadFileRes) {
								if (uploadFileRes.statusCode == 200) {
									let fileData = JSON.parse(uploadFileRes.data)
									console.log(fileData);
									_this.certFrontUrl = fileData.data.fileId; //给地址赋值
									//this.imgList = [...this.imgList, uploadFileRes.data]
								} else {
									uni.showToast({
										title: '上传图片不能超过2M，请重新上传',
										icon: 'none',
										duration: 2500
									})
									_this.imgList = [];
								}
							},
							fail: function(err) {
								uni.showToast({
									title: err,
									icon: 'none',
									duration: 2000
								})
							}
						});
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			//删除
			DelImg(e) {
				uni.showModal({
					title: '删除',
					content: '确定要删除这张图片？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			ChooseImage2() { //身份证国徽面
				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					//sourceType: ['camera'], //从相册选择
					success: (res) => {
						if (this.imgList2.length != 0) {
							this.imgList2 = this.imgList2.concat(res.tempFilePaths)
						} else {
							this.imgList2 = res.tempFilePaths
						}
						const tempFilePaths = res.tempFilePaths;
						const uploadTask2 = uni.uploadFile({
							url: this.baseURL + '/com/upload?fileType=certFront',
							header: {
								'token': uni.getStorageSync('token')
							},
							filePath: tempFilePaths[0],
							name: 'file',
							success: function(uploadFileRes) {
								if (uploadFileRes.statusCode == 200) {
									let fileData = JSON.parse(uploadFileRes.data)
									console.log(fileData.data.fileId);
									_this.certBackUrl = fileData.data.fileId
									//this.imgList = [...this.imgList, uploadFileRes.data]
								} else {
									uni.showToast({
										title: '上传图片不能超过2M，请重新上传',
										icon: 'none',
										duration: 2500
									})
									_this.imgList2 = [];
								}
							},
							fail: function(err) {
								uni.showToast({
									title: err,
									icon: 'none',
									duration: 2000
								})
							}
						});
					}
				});
			},
			ViewImage2(e) {
				uni.previewImage({
					urls: this.imgList2,
					current: e.currentTarget.dataset.url
				});
			},
			//删除
			DelImg2(e) {
				uni.showModal({
					title: '删除',
					content: '确定要删除这张图片？',
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.imgList2.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},

			//时间选择器
			timestampChange: function(c) {
				console.log(c)
				this.cerStartDate = c;

			},
			timestampChange2: function(c) {
				this.state2 = false;
				console.log(c)
				this.cerEndDate = c;
			},
			//验证码校验
			verify() {
				if (this.bankName == '') {
					uni.showToast({
						title: '请输入您的开户行',
						icon: 'none',
						duration: 2000
					})
					this.class2 = 'btns2';
					return;
				}

				if (this.bankAccName == '') {
					uni.showToast({
						title: '请输入您的开户名',
						icon: 'none',
						duration: 2000
					})
					this.class2 = 'btns2';
					return;
				}
				if (this.cerNo == '') {
					uni.showToast({
						title: '请输入您的身份证号',
						icon: 'none',
						duration: 2000
					})
					this.class2 = 'btns2';
					return;
				}
				if (this.acctNo == '') {
					uni.showToast({
						title: '请输入您的银行卡号',
						icon: 'none',
						duration: 2000
					})
					this.class2 = 'btns2';
					return;
				}
				if (this.mobile == '' || this.mobile.length != 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})
					this.class2 = 'btns2';
					return;
				}
				this.class2 = 'btns';
			},

			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				let arrid = e.target.value;
				console.log('选择到的值是：', this.array[arrid])
				this.bankName = this.array[arrid];
				this.index = arrid;
				console.log('bankName的当前值为:' + this.bankName)
			},
			checkboxChange2(e) {
				this.state2 = !this.state2;

				if (this.state2 == true) {
					this.cerEndDate = '长期';
					console.log(this.cerEndDate)
				}
				console.log(this.state2);
			},

			//获取验证码
			getOpenCode() {
				this.userName = this.bankAccName;
				let userName = this.userName;
				let cerNo = this.cerNo;
				let phone = this.mobile;
				let acctNo = this.acctNo;
				let reqdata = JSON.stringify({
					'mobile': phone,
					'cerNo': cerNo,
					'userName': userName,
					'acctNo': acctNo
				});

				if (this.bankName == '') {
					uni.showToast({
						title: '请输入您的开户行',
						icon: 'none',
						duration: 2000
					})
					return;
				}

				if (this.bankAccName == '') {
					uni.showToast({
						title: '请输入您的开户名',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.cerNo == '') {
					uni.showToast({
						title: '请输入您的身份证号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.acctNo == '') {
					uni.showToast({
						title: '请输入您的银行卡号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (phone == '' || phone.length != 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})
					return;
				}

				if (this.timer == 60) {
					this.disabled = true

					let timer1 = setInterval(() => {
						this.timer--;
						this.title = this.timer + '秒后重试'
						if (this.timer == 0) {
							clearInterval(timer1);
							this.timer = 60;
							this.disabled = false
							this.title = '获取验证码'
							return;
						}
					}, 1000);
				}
				uni.request({
					url: this.baseURL + '/gr/get/code?mobile=' + phone + '&cerNo=' + cerNo + '&userName=' +
						userName + '&acctNo=' + acctNo,
					method: 'POST',
					//data:reqdata,
					header: {
						'token': uni.getStorageSync('token')
					},
					dataType: 'json',
					success: (res) => {
						console.log(res)
						if (res.data.success == true) {
							uni.showToast({
								title: '发送成功',
								duration: 2000
							})
						}
						if (res.data.success == false) {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			},


			/**
			 * 提交开户申请
			 */
			toKtqb() {
				let tttdata = this;
				this.userName = tttdata.bankAccName;
				if (this.state == false) {
					uni.showToast({
						title: '请同意协议',
						icon: 'none'
					})
					return;
				}
				if (this.cerStartDate == '') {
					uni.showToast({
						title: '请选择身份证开始日期',
						icon: 'none'
					})
					return;
				}
				if (this.cerEndDate == '') {
					uni.showToast({
						title: '请选择身份证结束日期',
						icon: 'none'
					})
					return;
				}
				if (this.imgList.length == 0) {
					uni.showToast({
						title: '请上传身份证信息面',
						icon: 'none'
					})
					return;
				}
				if (this.imgList2.length == 0) {
					uni.showToast({
						title: '请上传身份证国徽面',
						icon: 'none'
					})
					return;
				}
				if (this.userName == '') {
					uni.showToast({
						title: '请输入您的姓名',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.cerNo == '') {
					uni.showToast({
						title: '请输入您的身份证号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.bankName == '') {
					uni.showToast({
						title: '请输入您的开户行',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.bankAccName == '') {
					uni.showToast({
						title: '请输入您的开户名',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.acctNo == '') {
					uni.showToast({
						title: '请输入您的银行卡号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.mobile == '') {
					uni.showToast({
						title: '请输入您的手机号',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.messageCode == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				//没有开户信息，调用添加接口
				if (this.openInfo == 0) {
					uni.request({
						url: this.baseURL + '/gr/add/gr',
						method: 'POST',
						data: {
							'userName': tttdata.userName,
							'acctNo': tttdata.acctNo,
							'bankAccName': tttdata.bankAccName,
							'mobile': tttdata.mobile,
							'cerNo': tttdata.cerNo,
							'bankName': tttdata.bankName,
							'messageCode': tttdata.messageCode,
							'cerStartDate': tttdata.cerStartDate,
							'cerEndDate': tttdata.cerEndDate,
							'certFrontUrl': tttdata.certFrontUrl,
							'certBackUrl': tttdata.certBackUrl
						},
						header: {
							'token': uni.getStorageSync('token')
						},
						dataType: 'json',
						success: (res) => {
							console.log(res);
							if (res.data.success == true) {
								uni.showToast({
									title: '提交成功，请设置交易密码',
									duration: 3000,
									icon: "success"
								})
								tttdata.open = 1;
							}
							if (res.data.success == false) {
								uni.showToast({
									title: res.data.message,
									icon: 'error',
									duration: 2000
								})
							}
						},
						fail(err) {
							console.log(err)
							uni.showToast({
								title: err,
								icon: 'error',
								duration: 2000
							})
						}
					})
				}
				//有开户信息，调用修改接口
				if (this.openInfo == 1) {

					uni.request({
						url: this.baseURL + '/gr/redo/info?userName=' + this.bankAccName + '&cerNo=' + this.cerNo,
						method: 'POST',
						header: {
							'token': uni.getStorageSync('token')
						},
						data: {
							'userName': tttdata.userName,
							'acctNo': tttdata.acctNo,
							'bankAccName': tttdata.bankAccName,
							'mobile': tttdata.mobile,
							'cerNo': tttdata.cerNo,
							'bankName': tttdata.bankName,
							'messageCode': tttdata.messageCode,
							'cerStartDate': tttdata.cerStartDate,
							'cerEndDate': tttdata.cerEndDate,
							'certFrontUrl': tttdata.certFrontUrl,
							'certBackUrl': tttdata.certBackUrl
						},
						success(res) {
							console.log(res)
							if (res.data.success == true) {
								uni.showToast({
									title: '提交成功，请设置交易密码',
									icon: 'success',
									duration: 3000
								})
								tttdata.open = 1;
							} else {
								uni.showToast({
									title: res.data.message,
									icon: 'error',
									duration: 2000
								})
							}
						},
						fail(err) {
							console.log(err)
							uni.showToast({
								title: err,
								icon: 'error',
								duration: 2000
							})
						}
					})
				}
			},

			/**
			 * 填完交易密码开始开户
			 */
			addTwoData() {
				if (this.password == '' || this.password == null) {
					uni.showToast({
						title: '请输入交易密码',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.passwords == '' || this.passwords == null) {
					uni.showToast({
						title: '请确认您的交易密码',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.password != this.passwords) {
					uni.showToast({
						title: '两次密码不相同',
						icon: 'none',
						duration: 2000
					})
					return;
				}

				uni.request({
					url: this.baseURL + '/gr/open/gr?acctNo=' + this.acctNo + '&password=' + this.password +
						'&code=' + this.messageCode,
					method: 'POST',
					header: {
						'token': uni.getStorageSync('token')
					},
					dataType: 'json',
					success: (res) => {
						console.log(res);
						if (res.data.success == true) {
							uni.showToast({
								title: '提交成功，审核预计五分钟',
								duration: 3000
							})
							uni.reLaunch({
								url: 'u-center'
							})
						}
						if (res.data.success == false) {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						}
					}
				})
			}
		},
		onLoad() {
			this.getOpenInfo();
		}
	}
</script>

<style>
	@import "../../colorui/main.css";
	@import "../../colorui/icon.css";

	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	input {
		line-height: 50px;
		height: 50px;
	}
</style>
